<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 去掉破折号，首字母改大写 或者'font-size''-->
    <!-- <div id="app" :style="{color:isBlue,fontSize:'30px'}"> -->
        <div id="app" >
            <button @click="fnFontSize(2)">放大</button>
            <button @click="fnFontSize(-2)">缩小</button>
            <input type="range" v-model="fontSize">{{fontSize}}
        <!-- <div :style="{color:isBlue,fontSize:fontSize + 'px'}"> -->
            <div :style="[objStyle,styles]">
        会如慧升将脱掉，价杀交人人区得动能的打宫范骨药，定弄皇龄而望程为切使此仁，今老禀卧娟子他使，回烦韩么九高派支支了性人，太太牛使不的丹人身了便性丰，他未而，洪亡实时奔就今，宫视后不，韩极一虑有要以你意葬外为法骨，老竟办此是仍郭胜制挟量生法友不，国他促却单竟。
    </div>
</div>
    <script>
        new Vue({
            el:"#app",
            data:{
                isBlue:"blue",
                // fontSize:"30px"
                fontSize:30,
                styles:{
                    background:'yellow'
                }
            },
            methods:{
                fnFontSize(size){
                    // this.fontSize = parseInt(this.fontSize) + size + 'px'
                    this.fontSize = Number(this.fontSize) + size
                }
            },
            computed:{
                objStyle(){
                    return {
                        color:this.isBlue,
                        fontSize:this.fontSize + 'px'
                    }
                }
            }
        })
    </script>
</body>
</html>